<template>
  <view class="view">
    <view class="content">
      <!-- 用户信息 -->

      <view class="user-info-wrapper">
        <view v-if="!isLogin" class="info-wrapper" @click="handleLogin()">
          <image :src="user.avatar == null ? '../../static/missing-face.png' : user.avatar" class="user-aver"></image>
          <view class="user-name">登录/注册</view>
        </view>
        <view v-else class="info-wrapper" @click="handleUpdateUserInfo()">
          <image :src="user.avatar == null ? '../../static/missing-face.png' : user.avatar" class="user-aver"></image>
          <view class="user-name">
            <view>欢迎登录~</view>
            <view>
              {{ user.username }}
            </view>
          </view>
        </view>

        <image class="left" src="../../static/downpush-white.png"></image>
      </view>

      <!-- 订单管理模块 -->
      <view class="order-manager-wrapper">
        <view class="order-top">
          <view class="order-top-item" @click="handleGoto('/pages/integral/index')">
            <text>积分</text>
            <text>{{ score }}</text>
          </view>

          <view class="order-top-item" @click="handleGoto('/pages/coupon/myCoupon')">
            <text>优惠券</text>
            <text>{{ couponCount }}</text>
          </view>

          <view class="order-top-item">
            <text>收藏</text>
            <text>0</text>
          </view>
        </view>
        <view class="order-bottom">
          <view class="order-bottom-item" @click="handleGoto('/pages/order/index?tab=0')">
            <image src="../../static/mine/dai-fukuan.svg"></image>
            <text>待付款</text>
          </view>

          <view class="order-bottom-item" @click="handleGoto('/pages/order/index?tab=1')">
            <image src="../../static/mine/dai-fahuo.svg"></image>
            <text>待发货</text>
          </view>

          <view class="order-bottom-item" @click="handleGoto('/pages/order/index?tab=2')">
            <image src="../../static/mine/dai-shouhuo.svg"></image>
            <text>待收货</text>
          </view>

          <view class="order-bottom-item" @click="handleGoto('/pages/order/index?tab=3')">
            <image src="../../static/mine/dai-pingjia.svg"></image>
            <text>待评价</text>
          </view>

          <view class="order-bottom-item" @click="handleGoto('/pages/order/afterSale')">
            <image src="../../static/mine/shouhou.svg"></image>
            <text>售后</text>
          </view>
        </view>
      </view>

      <!-- 通用功能 -->
      <view class="normal-func-wrapper">
        <view class="func-item" @click="handleGoto('/pages/address/index')">
          <image src="../../static/mine/myaddress.png"></image>
          <text>地址管理</text>
        </view>
        <view class="func-item" @click="handleGoto('/pages/order/index?tab=4')">
          <image src="../../static/mine/logistics.png"></image>
          <text>全部订单</text>
        </view>

        <view class="func-item" @click="handleGoto('/pages/integral/myIntegral')">
          <image src="../../static/mine/mypoint.png"></image>
          <text>我的积分</text>
        </view>

        <!-- 考虑实现 -->
        <!-- <view class="func-item">
          <image src="../../static/mine/distribution.png"></image>
          <text>我的分销</text>
        </view> -->

        <view class="func-item" @click="handleGoto('/pages/coupon/myCoupon')">
          <image src="../../static/mine/mycoupon.png"></image>
          <text>优惠券</text>
        </view>

        <view class="func-item" @click="handleGoto('/pages/sign/index')">
          <image src="../../static/mine/sign.png"></image>
          <text>每日签到</text>
        </view>

        <view class="func-item" @click="handleGoto('/pages/coupon/index?i=0')">
          <image src="../../static/mine/couponcenter.png"></image>
          <text>领券中心</text>
        </view>

        <view class="func-item" @click="handleGoto('/pages/mine/feedback')">
          <image src="../../static/mine/feedback.png"></image>
          <text>意见反馈</text>
        </view>

        <view class="func-item" @click="handleGoto('/pages/mine/about')">
          <image src="../../static/mine/pointgift.png"></image>
          <text>关于</text>
        </view>

        <!-- <view class="func-item" @click="handleGoto('')">
          <image src="../../static/mine/setting.png"></image>
          <text>设置</text>
        </view> -->
      </view>
    </view>

    <view class="bg">
      <image src="../../static/main-bg.png" mode="widthFix"></image>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      user: {
        id: ''
      },
      // mediaUrl: this.$domain.media,
      couponCount: 0,
      score: 0
    }
  },
  computed: {
    isLogin() {
      return getApp().globalData.header.Authorization !== '' || getApp().globalData.header.Authorization.length !== 0
    }
  },
  onShow() {
    this.user = getApp().globalData.userInfo
    this.getCouponCount()
    this.getScore()
  },
  methods: {
    async getCouponCount() {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getUserCouponCount/' + this.user.id,
        header: getApp().globalData.header
      })

      if (res.status != 200) {
        return
      }
      this.couponCount = res.data.count
    },
    async getScore() {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getUserScore/' + this.user.id,
        header: getApp().globalData.header
      })

      if (res.status != 200) {
        return
      }
      this.score = res.data
    },
    handleGoto(url) {
      uni.navigateTo({
        url: url
      })
    },
    handleLogin() {
      uni.navigateTo({
        url: '/pages/login/index'
      })
    },
    handleUpdateUserInfo() {
      this.handleGoto('/pages/mine/userInfo')
    }
  }
}
</script>

<style lang="scss" scoped>
.view {
  position: relative;
}

.bg {
  position: absolute;
  top: -80upx;
  left: 0%;
  width: 100vw;
  border-radius: 30upx;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  image {
    width: 100%;
  }
}

.content {
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 1;
  // background-color: rgba($color: #000000, $alpha: .3);
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;

  .user-info-wrapper {
    margin-top: 100upx;
    width: 100%;
    height: 150upx;
    // background-color: rgba($color: #fff, $alpha: 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 50upx;

    .info-wrapper {
      width: 100%;
      height: 150upx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .user-aver {
      width: 150upx;
      height: 150upx;
      border: 7upx solid #fff;
      border-radius: 50%;
    }

    .left {
      width: 40upx;
      transform: rotate(-90deg);
      height: 40upx;
    }

    .user-name {
      flex: 4;
      height: 100%;
      box-sizing: border-box;
      padding-top: 30upx;
      padding-left: 30upx;
      color: #fff;
      font-size: 35upx;
      // font-weight: 900;
      // background-color: aqua;
    }
  }

  .order-manager-wrapper,
  .normal-func-wrapper {
    background-color: #fff;
    border-radius: $def-radius;
    box-shadow: rgba($color: #fff, $alpha: 0.5) 0 0 8upx 5upx;
  }
  .order-manager-wrapper {
    margin-top: 90upx;
    width: 92vw;
    box-sizing: border-box;
    padding: 20upx;
    padding-top: 50upx;

    .order-top {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;

      .order-top-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 30upx;

        text {
          margin-bottom: 10upx;
        }

        text:last-child {
          color: $def-price-color;
        }
      }
    }

    .order-bottom {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      margin-top: 50upx;
      .order-bottom-item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 25upx;
        color: $uni-text-color-grey;
        image {
          width: 70upx;
          height: 70upx;

          margin-bottom: 20upx;
        }
      }
    }
  }
  .normal-func-wrapper {
    margin-top: 40upx;
    margin-bottom: 50upx;
    width: 93vw;
    padding: 30upx;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 40upx;
    row-gap: 60upx;

    .func-item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      image {
        width: 50upx;
        height: 50upx;
      }

      text {
        margin-top: 10upx;
        font-size: 25upx;
      }
    }
  }
}
</style>
